<template>
  <view v-if="shenheStatus == 0" class="page">
    <template v-if="data">
      <pageSwiper
        :data="{
          items: data.goods_pic,
          index: swiperIndex,
        }"
      ></pageSwiper>

      <pageInfo ref="pageInfo" :data="data" :num="num"></pageInfo>

      <pageList :data="data"></pageList>
      <pageFooter :totalPrice="totalPrice"></pageFooter>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import pageList from "./components/page-list.vue";
import pageSwiper from "./components/page-swiper.vue";
import pageInfo from "./components/page-info.vue";
import pageFooter from "./components/page-footer.vue";
import { goodsInfo } from "@/api/marketing/callOut";

export default {
  components: {
    Shenhe,
    pageList,
    pageSwiper,
    pageInfo,
    pageFooter,
  },

  data() {
    return {
      data: null,
      swiperIndex: 0,
      id: "",
      longitude: "",
      latitude: "",
      num: 1,
    };
  },

  computed: {
    totalPrice() {
      let { data, num } = this;

      if (data && data.price) {
        let price = parseFloat(data.price);

        return (price * num).toFixed(2).split(".");
      }

      return ["0", "00"];
    },
  },

  async onLoad(opi) {
    this.id = opi.id;
    this.getLocation();
  },

  onShow() {
    this.Emit.$on("handle", this.handle);
  },

  onHide() {
    this.Emit.$off("handle");
  },

  onUnload() {
    this.Emit.$off("handle");
  },

  methods: {
    async getLocation() {
      try {
        let res = await this.$store.dispatch("getLocation");
        this.longitude = res.longitude;
        this.latitude = res.latitude;

        this.getData();
      } catch (error) {
        this.getData();
      }
    },

    async getData() {
      try {
        let { longitude, latitude, id } = this;
        const res = await goodsInfo({
          longitude,
          latitude,
          id,
        });
        if (!res.code) {
          let data = res.data.info;
          if (data && data.worker_list && data.worker_list.length) {
            data.worker_list.forEach((e) => {
              e.checked = false;
            });
          }
          this.data = data;
        }
      } catch (error) {
        this.$utils.toast(error);
      }
    },

    checked(index) {
      let { worker_list } = this.data,
        item = worker_list[index];

      worker_list.forEach((el) => {
        el.checked = false;
      });

      this.$set(item, "checked", true);
    },

    handle(type, params) {
      switch (type) {
        case "swiper":
          this.swiperIndex = params;
          break;

        case "checked":
          this.checked(params);
          break;

        case "submit":
          this.submit();
          break;

        case "changeNum":
          this.num = params;
          break;

        default:
          break;
      }
    },

    submit() {
      try {
        let { data } = this,
          item = data.worker_list.find((el) => el.checked);

        if (data.bind_worker && !item)
          return this.$utils.toast("请选择服务人员～");

        let params = [
            {
              product_type: 6,
              goods_list: [
                {
                  goods_id: data.id,
                  num: this.$refs.pageInfo.num,
                },
              ],
            },
          ],
          str = `submit=${JSON.stringify(params)}&is_worker=1&worker_id=${
            item ? item.id : 0
          }`;

        uni.navigateTo({
          url: `/order/order-submit/order-submit?${str}`,
        });
      } catch (error) {
        this.$utils.toast(error);
      }
    },
  },
};
</script>

<style lang="scss">
.page {
  padding-bottom: 130rpx;
  padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f2f2f2;
}
</style>
